<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>layui</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<link href="../../static/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link rel="stylesheet" href="../../static/vui/css/vui.css">
	<script type="text/javascript" src="../../static/js/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="../../static/layer/layer.js"></script>
	<script type="text/javascript" src="../../static/vui/js/datagrid.js"></script>
	<script type="text/javascript" src="../../static/vui/js/treegrid.js"></script>
	<script type="text/javascript" src="../../static/js/common.js"></script>
	<style>
		#tree_pro_out .vui-table .vui-table-cell{
			border:0px;cursor:pointer;
		}
		#tree_pro_out{
			border: 1px solid #e6e6e6;height: 496px;overflow: auto;position: absolute;top:6px;left:6px;
		}
	</style>
</head>
<body>

<div>
	<div id="tree_pro_out">
		<div id="tree" style="margin:0px;"></div>
	</div>

	<div style="position: absolute;left:256px;top:1px;" id="formArea">
		<table class="table-top">
			<tr>
				<td>
					<input type="text" class="input" name="complex" placeholder="请输入商品名称 或编码 或条码" autocomplete="off"/>
				</td>
				<td>
					<button class="button" id="query"><span>查询</span></button>
					<button class="button" id="reset"><span>重置</span></button>
				</td>
			</tr>
		</table>
	</div>

	<div style="position: absolute;left:246px;top:43px;">
		<div id="table"></div>
	</div>
</div>

<script>
	top.app.LAYUI_WINDOW_OPEND = true;
    var params = app.getRequestParams();
    $(function(){
        $('#table').datagrid({
			checkbox:true,
			checkOnClick:true,
            simplePagination:true,
            width:900-260-2,limit:8,limits:[8],
            url:app.BASE_API_URL+'product/choose',
            dblClickRow:selectRow,
            columns:[
                {field:'name',title:'商品名称',width:100,formatter:function (row) {
                        return '<a href="javascript:void(0);" class="link">'+row.name+'</a>';
                    }},
                {field:'barcode',title:'商品条码',width:80},
                {field:'code',title:'商品编码',width:100},
                {field:'model',title:'规格型号',width:80}
            ]
        });

        $('#tree').treegrid({
            id:'tree',header:'none',width:240,
			click:function(row){
                queryProduct(row.logicalCode);
			},
            url:app.BASE_API_URL+'productType/select',
            columns:[
                {field:'name',title:'商品分类名称',width:240,fixed:true,formatter:function (row) {
					return row.name.substr(row.name.lastIndexOf('/')+1);
				}}
            ]
        });

        $('#query').click(function () {
            queryProduct("");
        });

        $('#reset').click(function () {
            $('input[name="complex"]').val('');
        });

    });

    function selectRow(_this) {
        var row = $(_this).parent().parent().data();
        var search = parent.$('#'+params.searchId);
        search.parent().data({product:row});
        search.search('setValue',row.id,row.name);
        parent.productSelected(parent.$('#'+params.searchId).parent());
        //app.closeLastWindow();
    }
    
    app.getOkBtn().click(okBtn);

    $('.layui-layer-btn1',parent.document).click(function () {
        if(okBtn()){
            app.closeLastWindow();
		}
    });

    function okBtn() {
        var rows = $('#table').datagrid('getSelections');
        if( rows.length == 0 ){
            app.message(layer,'未选择商品');
            return false;
		}

        var rowEle = null,gridId = null,rowIndex = 0;
        for( var i=0 ; i<rows.length ; i++ ){
            var row = rows[i];
            if( i == 0 ){
                var cellEle = parent.$('#'+params.searchId).parent();
                rowEle = cellEle.parent();
                gridId = '#'+rowEle.parent().parent().parent().attr('id');
                rowIndex = parseInt(rowEle.attr('i'));
                cellEle.data({product:row});
                parent.productSelected(cellEle,gridId);
            }else{
                if( rowIndex >= parseInt(rowEle.parent().find('.vui-table-row').last().attr('i')) - 2 ){
                    parent.createRow(gridId);
                }

                rowIndex++;
                var vuiTableRows = rowEle.parent().find('.vui-table-row[i="'+rowIndex+'"]');
                var cellEle = vuiTableRows.find('div[editor="search"]');
                cellEle.data({product:row});
                parent.productSelected(cellEle,gridId);

            }

        }
        $('#table input[type="checkbox"]').prop("checked",false);
        return true;
    }

    function queryProduct(logicalCode) {
        var queryParams = app.serializeForm();
        queryParams.productTypeLogicalCode = logicalCode;
        $('#table').datagrid("reload",queryParams);
    }

</script>
</body>
</html>